@import "compass/css3";
@import "_animation";

html {
  background: white;
  overflow:hidden;
}

.container {
  background-color:white;
  left: 50%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 3000px;
  margin-left: -455px;
  margin-top: -240px;
}

.background {
  position: absolute;
  height: 3000px;
  width: 3000px;
}

.coin {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background: url('images/coin.gif') no-repeat;
}

.goal {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background: url('images/goal.png') no-repeat;
}

.scoreboard {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.45);
  font: bold 40px/80px sans-serif;
  width: 200px;
  text-align: center;
  color: white;
}

.platform {
  background-color: #bada55;
  position: absolute;
  @include border-radius(5px);
}

.megaplatform {
  background-color: red;
  position: absolute;
  @include border-radius(5px);
}

.player {
  height: 100px;
  left: 0;
  margin-left: -42px;
  margin-top: -100px;
  position: absolute;
  top: 0;
  width: 75px;

  div {margin: 0; padding: 0;}
  div div {background: #A4CA39; position: relative;}

  background-image: url('images/player-still.png');


  &.jumping {
    background-image: url('images/player-jumping.png');
  }
}